<template>
	<view class="container">
		<!-- 订单信息部分 -->
		<view class="order-info">
			<text class="header">订单信息</text>
			<view class="card">
				<view class="info-row">
					<text>订单号: 121212112487878</text>
					<text class="status">待评价</text>
				</view>
				<view class="info-row">
					<text>服务项目: 车辆保养</text>
				</view>
				<view class="info-row">
					<text>服务门店: 大宝车辆维修店</text>
				</view>
				<view class="info-row">
					<text>下单时间: 2020.01.08.17:40</text>
				</view>
				<view class="info-row">
					<text>预约时间: 2020.01.08.17:40</text>
				</view>
				<view class="info-row">
					<text>车辆: 奔驰FWE4/路A9BFHJ</text>
				</view>
				<view class="info-row">
					<text>备注:</text>
				</view>
			</view>
		</view>

		<!-- 订单详情部分 -->
		<view class="order-details">
			<text class="header">订单详情</text>
			<view class="card">
				<view class="detail-row">
					<text>车辆精洗</text>
					<text>￥ 199</text>
				</view>
				<view class="detail-row">
					<text>车辆附加费用</text>
					<text>￥ 199</text>
				</view>
			</view>

			<view class="card">
				<view class="price-row">
					<text>原价</text>
					<text>￥ 100</text>
				</view>
				<view class="discount-row">
					<text>优惠</text>
					<text class="discount">-￥ 10</text>
				</view>
			</view>

			<view class="card">
				<text>支付金额</text>
				<text class="payment">￥200</text>
			</view>
		</view>

		<!-- 底部操作 -->
		<!-- 底部操作 -->
		<view class="footer">
			<view class="contact">
				<image class="contact-img" src="/static/myOrder/kefu.png" />
				<text class="contact-text">联系客服</text>
			</view>
			<view class="actions">
				<button class="action-btn white-border" @click="handleReview">立即评价</button>
				<button class="action-btn blue" @click="handleOrderAgain">再来一单</button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		methods: {
			handleReview() {
				//立即评价按钮点击
				uni.navigateTo({
					url: '/pages/my/evaluate/evaluate'
				});
			},
			handleOrderAgain() {
				// 再来-单按钮的逻辑
			}
		}
	}
</script>

<style scoped>
	.container {
		background-color: #fff;
		padding: 10px;
		position: relative;
		min-height: 100vh;
	}

	.header {
		font-size: 18px;
		margin-bottom: 10px;
	}

	.card {
		background-color: #fff;
		padding: 10px;
		margin-bottom: 10px;
		border-radius: 5px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.info-row,
	.detail-row,
	.price-row,
	.discount-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 5px;
	}

	.status {
		color: red;
	}

	.discount {
		color: red;
	}

	.payment {
		font-size: 16px;
	}

	.footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		position: absolute;
		bottom: 0;
		width: 90%;
		background: #fff;
		/* 或其他背景色 */
	}

	.contact {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.contact-img {
		width: 24px;
		height: 24px;
		margin-bottom: 5px;
		/* Adjust space between image and text */
	}

	.contact-text {
		font-size: 14px;
		/* Adjust text size if needed */
		color: #000;
		/* Text color */
	}

	.actions {
		display: flex;
	}

	.action-btn {
		flex: 1;
		margin: 0 5px;
		padding: 10px;
		border-radius: 5px;
		color: #fff;
		height: 40px;
		line-height: 25px;
	}

	.white-border {
		border: 1px solid #007bff;
		background-color: #fff;
		color: #007bff;
	}

	.blue {
		background-color: #007bff;
	}
</style>